//@import '~@/asset/common.scss';
$c_main:#EF8236;// 主色调
$c_vice:#23a3c5;// 副色调
$c_weChat:#07c160;// 微信色调
// 按钮通用样式
@mixin btn($h:36rpx,$bg:$c_main,$color:#fff,$fz:32rpx) {
  height: $h;
  line-height: $h;
  border-radius: 6rpx;
  background: $bg;
  font-size: $fz;
  color: $color;
  text-align: center;
  margin: 0 12rpx 12rpx 0;
  //@debug($fz)
}
// 按钮镂空样式
@mixin btn_no($h:36rpx,$bg:#fff,$color:#fff,$fz:32rpx,$borderColor:#e5e5e5) {
  height: $h;
  line-height: $h - 2;
  background: $bg;
  font-size: $fz;
  border:1rpx solid $borderColor;
  color: $color;
  text-align: center;
}
// 镂空但文字颜色和border颜色相同的按钮
@mixin btn_same($h:36rpx,$color:$c_main,$bg:0,$fz:0) {
  height: $h;
  line-height: $h - 2;
  border:1rpx solid $color;
  color: $color;
  text-align: center;
  @if($fz!=0){
    font-size: $fz;
  }
  @if($bg==0){
    background: rgba($color,0.05);
  }@else{
    background: $bg;
  }
}
// 所有按钮的不可点击和gary的样式
@mixin btn_disable($h:36rpx,$color:$c_main) {
  &_round,&.round{
    border-radius: $h;
  }
  &_long,&.long{
    width: 100%;
    margin: 20rpx 0 0;
  }
  &_cant,&_disable,&_gray{
    @include btn($h,$color);
  }
  // 不可点击（有色）
  &.cant,&_cant{
     //opacity: 0.5;
    //background: lighten($color,20%);
  }
  // 不可点击
  &.disable,&_disable{
    background: #F5F5F5;
    color: #B8B8B8;
  }
  // 置灰状态
  &.gray,&_gray{
    background: #E6E6E6;
    color: #A3A3A3;
  }
  // 镂空
  &.empty, &_empty{
    @include btn_no($h,#fff,#333);
  }
  // 镂空但文字颜色和border颜色相同的按钮
  &.same,&_same{
    @include btn_same($h,$color);
  }
}
/*
生成
*/
@mixin btnRun($sizes,$colors,$debug:0) {
  $namestr:'';
  @each $color,$c in $colors{
    @each $sizeName,$h,$fz in $sizes{
      //$namestr:$namestr+ btn_#{$colorName}_#{$sizeName}+','+ btn_long_#{$colorName}_#{$sizeName}+',';
      $namestr:$namestr+ ' | '+ btn_#{$color}_#{$sizeName};
      //$namestr:$namestr+ ' | '+ btn_#{$color}_#{$sizeName};
      %btn_#{$color+'_'+$sizeName},.btn_#{$color+'_'+$sizeName}{
        @include btn($h,$c,#fff,$fz);
        @include btn_disable($h,$c);
        display: inline-block;
        box-sizing: border-box;
        padding: 0 30rpx;
        min-width: 180rpx;
      }
      //%btn_long_#{$color+'_'+$sizeName},.btn_long_#{$color+'_'+$sizeName}{
      //  @include btn($h,$c,#fff,$fz);
      //  @include btn_disable($h,$c);
      //  width: 100%;
      //  margin-top: 20rpx;
      //}
    }
    $namestr:$namestr+',';
  }
  @if($debug==1){
    //$namestr:$namestr+' |';
    @debug ($namestr);
  }
}
// h86：标识大小的类名,86rpx：高度,32rpx：字体大小，一个括号即可生成一组
$sizes:(h86,86rpx,32rpx),(h72,72rpx,32rpx),(h64,64rpx,30rpx),(h48,48rpx,24rpx);
// 主题名加颜色即可生成一套主题  btn_主题名_标识大小的类名
$colors:(taobao,#fd5d01),(elm,#409eff),(wx,$c_weChat),(red,#f56c6c),(orange,#e6a23c);
@include btnRun($sizes,$colors,0);
